import React, { Component } from 'react'
import { Icon } from 'antd-mobile'
import { OrderForPosition } from './'

export default class TradeV3 extends Component {
  constructor() {
    super()
    this.renderGoodsTab = this.renderGoodsTab.bind(this)
    this.renderChartTypeTab = this.renderChartTypeTab.bind(this)
    this.renderFooterTab = this.renderFooterTab.bind(this)
    this.state = {
      goodsTabIndex: 0,
      chartTypeTabIndex: 0,
      footerTabIndex: 0,
    }
  }
  render() {
    return (
      <div className={`rt-trade-v3-container`}>
        <div className={`rt-trade-header-box`}>
          <div className={`rt-left`}>
            <img alt="logo" src={require('static/images/logo-sm-v3.png')} />
            <span>资产</span>
            <strong>3,686.90元</strong>
            <img alt="authed?" src={require('static/images/authed-v3.png')} />
          </div>
          <div className={`rt-right`}>
            <div>
              <Icon type="question" />
              <span>充值</span>
            </div>
            <div>
              <Icon type="question" />
              <span>提现</span>
            </div>
          </div>
        </div>
        <div className={`rt-goods-tabs`}>
          {/*<div className={`rt-tab`}>
            <span className={`rt-goods-name`}>工业银</span>
            <span className={`-diff`}>3503</span>
            <Icon className={`-down`} type="caret-down" />
          </div>*/}
          {
            ['工业银', '工业油', '工业铜'].map(this.renderGoodsTab)
          }
        </div>
        <div className={`rt-market-price-box`}>
          <span>最高：3520</span>
          <span>最低：3479</span>
          <span>昨收：3491</span>
          <span>开盘：3499</span>
        </div>

        <div className={`rt-scrollable-container`}>

        <div className={`rt-chat-genre-box`}>
          {
            ['分时线', '1分钟线', '5分钟线', '30分钟线', '日线'].map(this.renderChartTypeTab)
          }
        </div>
        <img
          className={`rt-chart-img`}
          alt="chart"
          src={require('static/images/chart-v3.png')}
        />
        <div className={`rt-available-goods-box`}>
          <div className={`rt-goods -active`}>
            <span>300秒</span>
            <span className={`rt-middle-text`}>250元／手</span>
            <span>波动盈亏3元</span>
            <div className={`cm-right-angle-trangle-box`}>
              <div className={`cm-tick-box -hide`}></div>
            </div>
          </div>
          <div className={`rt-goods`}>
            <span>300秒</span>
            <span className={`rt-middle-text`}>250元／手</span>
            <span>波动盈亏3元</span>
          </div>
          <div className={`rt-goods`}>
            <span>300秒</span>
            <span className={`rt-middle-text`}>250元／手</span>
            <span>波动盈亏3元</span>
          </div>
          {
            Array(0).fill(1).map(v => (
              <div key={Math.random()} className={`rt-goods`}>
                <span>300秒</span>
                <span className={`rt-middle-text`}>250元／手</span>
                <span>波动盈亏3元</span>
              </div>
            ))
          }
        </div>
        <div className={`rt-operte-btn-group`}>
          <div className={`-red`}>
            <Icon type="question" />
            <span>买涨</span>
          </div>
          <div>
            <Icon type="question" />
            <span>买跌</span>
          </div>
        </div>
        <div className={`rt-percentage-box`}>
          <span className={`rt-color-red`}>24%</span>
          <div>
            <span className={`rt-color-red`}>多</span>
            <span>／</span>
            <span className={`rt-color-green`}>空</span>
          </div>
          <span className={`rt-color-green`}>76%</span>
        </div>
        <div className={`rt-progress-bar-box`}>
          <div className={`rt-bar-red`}></div>
          <div className={`rt-bar-green`}></div>
        </div>
        <p className={`rt-order-table-title`}>正在交易的订单</p>

        <OrderForPosition />
        <OrderForPosition />
        <OrderForPosition />

        </div>

        <div className={`rt-footer-tab`}>
          {
            ['微盘', '直播', '账户', '财经', '排行'].map(this.renderFooterTab)
          }
        </div>
      </div>
    )
  }
  renderGoodsTab(v, i) {
    const { goodsTabIndex } = this.state
    return (
      <div
        key={i}
        className={`rt-tab ${goodsTabIndex === i ? '-active' : ''}`}
        onClick={() => {
          if (goodsTabIndex === i) return
          this.setState({
            goodsTabIndex: i,
          })
        }}
      >
        <span className={`rt-goods-name`}>{v}</span>
        <span>3503</span>
        <Icon type="caret-up" />
      </div>
    )
  }
  renderChartTypeTab(v, i) {
    const { chartTypeTabIndex } = this.state
    return (
      <span
        key={i}
        className={`${chartTypeTabIndex === i ? '-active' : ''}`}
        onClick={() => {
          if (chartTypeTabIndex === i) return
          this.setState({
            chartTypeTabIndex: i,
          })
        }}
      >
        {v}
      </span>
    )
  }
  renderFooterTab(v, i) {
    const { footerTabIndex } = this.state
    return (
      <div
        key={i}
        className={`${footerTabIndex === i ? '-highlight' : ''}`}
        onClick={() => {
          if (footerTabIndex === i) return
          this.setState({
            footerTabIndex: i,
          })
        }}
      >
        <Icon type="question" />
        <span>{v}</span>
      </div>
    )
  }
}